<!--
 * @Author: 刘十三
 * @Date: 2024-03-19 09:57:28
 * @LastEditors: 刘十三
 * @LastEditTime: 2024-03-19 17:25:27
 * @FilePath: \FJ-dev-1.3.1\dev\pages\flowImage\index.vue
 * @Description: 待办流程图
-->

<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999"></theme-navbar>
    <!-- #endif -->
    <view class="flow-image">
      <view class="flow-example">
        <text class="flow-example-list">
          <text class="flow-example-text">图例：</text>
        </text>
        <view class="flow-example-list">
          <view class="flow-example-div"></view>
          <text class="flow-example-text">已完成</text>
        </view>
        <view class="flow-example-list">
          <view class="flow-example-div"></view>
          <text class="flow-example-text">进行中</text>
        </view>
        <view class="flow-example-list">
          <view class="flow-example-div"></view>
          <text class="flow-example-text">已完成</text>
        </view>
      </view>
      <movable-area scale-area>
        <movable-view direction="all" :scale="true" scale-min="1" scale-max="4" :scale-value="scale">
          <!-- <image class="flow-image-main" :src="src" mode="aspectFit" :style="{ width: width + 'px', height: height + 'px' }"></image> -->
          <image class="flow-image-main" :src="src" mode="aspectFit"></image>
        </movable-view>
      </movable-area>
    </view>
  </view>
</template>
<script>
import commonService from "@/service/common/common.service";
export default {
  data() {
    return {
      docInsUuid: "",
      processDefKey: "",
      imageBase64: "data:image/png;base64,",
      src: "",
      scale: 1.5,
      width: 100,
      height: 75,
    };
  },
  onLoad(opt) {
    this.docInsUuid = opt.bizUuid;
    this.processDefKey = opt.processDefKey;
    this.width = this.$u.sys().windowHeight;
    this.height = this.width * 0.75;
    this.getFlowImage();
  },
  created() {},
  methods: {
    onChange() {},
    onScale() {},
    getFlowImage() {
      let param = {
        docInsUuid: this.docInsUuid,
        processDefKey: this.processDefKey,
      };
      commonService
        .getFlowImage(param)
        .then((res) => {
          if (res.code == 200 && res.success) {
            this.src = (this.imageBase64 + res.bean).replace(/[\r\n]/g, "");
          } else {
            this.$modal.alert("流程图预览失败", () => {
              uni.navigateBack();
            });
          }
        })
        .catch((err) => {
          this.$modal.alert("流程图预览失败", () => {
            uni.navigateBack();
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  padding: 0;
}
.flow-example {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
}

.flow-example-list {
  display: flex;
  align-items: center;
  margin-right: 24px;
  flex-direction: row-reverse;
}
.flow-example-text {
  transform: rotate(90deg);
  writing-mode: vertical-rl;
}
.flow-example-div {
  width: 18px;
  height: 18px;
  margin-left: 18px;
  border-radius: 2px;
}
.flow-example-list:nth-child(1) {
  .flow-example-text {
    display: inline-block;
    font-weight: 600;
  }
}
.flow-example-list:nth-child(2) {
  .flow-example-div {
    background: rgb(103, 194, 58);
  }
}
.flow-example-list:nth-child(3) {
  .flow-example-div {
    background: rgb(255, 0, 0);
  }
}
.flow-example-list:nth-child(4) {
  .flow-example-div {
    background: rgb(88, 88, 88);
  }
}

.flow-image {
  width: 100%;
  /* #ifdef H5-ONLY */
  height: calc(100vh - 44px - 30px);
  /* #endif */
  /* #ifndef H5-ONLY */
  height: calc(100vh - 30px);
  /* #endif */
}
movable-area {
  /* #ifdef H5-ONLY */
  height: calc(100vh - 44px - 30px) !important;
  /* #endif */
  /* #ifndef H5-ONLY */
  height: calc(100vh - 30px) !important;
  /* #endif */
}
movable-view {
  // display: flex;
  // align-items: center;
  // justify-content: center;
  width: 100%;
  /* #ifdef H5-ONLY */
  height: calc(100vh - 44px - 30px);
  /* #endif */
  /* #ifndef H5-ONLY */
  height: calc(100vh - 30px);
  /* #endif */
}
movable-area {
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: hidden;
}
movable-view image {
  max-width: 100%;
  max-height: 100%;
  margin-top: 20%;
  transform-origin: center center; /* 设置旋转的中心点 */
  transform: rotate(90deg); /* 旋转90度 */
}
</style>
